<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" type="text/css" href="./css_4.6.1/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="./css_3.4.1/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<title>作品库</title>
		<style>
			@font-face {
				font-family: 'Open Sans';
				font-style: normal;
				font-weight: 300;
				src: local('Open Sans Light'),
					local('OpenSans-Light'),
					url(../fonts/oopensans-webfont.woff) format('woff')
			}

			@font-face {
				font-family: 'Open Sans';
				font-style: normal;
				font-weight: 600;
				src: local('Open Sans Semibold'),
					local('OpenSans-Semibold'),
					url(./font/opensans-webfont.woff) format('woff')
			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", SimSun, "Microsoft YaHei", sans-serif;
				font-weight: 300;
				color: #333
			}

			body {
				font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
				font-weight: 300;
				color: #5c5c5c
			}

			body {
				background-color: #DADFE1;
				font-family: 'open_sansregular';
			}

			.header-title {
				color: #414344;
				border-bottom: 1px solid #c7ced1;
				padding-bottom: 24px;
				margin-bottom: 24px;
				display: table;
				margin-right: auto;
			}


			.header-about {
				color: #5C6A70;
				font-size: 14px;
				margin-bottom: 24px;
			}

			.header-navItem {
				font-size: 12px;
				color: #374043;
				letter-spacing: 2px;
				clear: both;
			}

			.nav-link {
				color: #5c6a70;
				letter-spacing: 2px;
				width: auto;
			}

			.nav-link:hover {
				color: #252b2d;
			}

			.post-inner {
				box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
				border-radius: 5px;
				overflow: hidden;
				margin-bottom: 35px;
				padding-top: 45px;
				padding-bottom: 45px;
				padding-left: 56px;
				padding-right: 56px;
				background-color: white;
				margin-top: 10px;
			}

			.post-body {
				background-color: white;
				padding: 56px;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
			}

			.post-body-title {
				margin-top: 0;
			}

			.tup {
				background-image: url(img/llq.png);
				background-size: cover;
				background-position: 50%;
				height: 300px;
			}

			.post-body-content {
				font-size: 17px;
				color: #5c5c5c;
				padding-bottom: 56px;
				border-bottom: 1px solid #dce4e6;
				margin-top: 30px;
			}

			@media (min-width:1200px) {
				#zhuti {
					padding-top: 100px;
				}

				#min-header {
					display: none;
				}

				#header {
					display: block;
				}

				picture {
					margin-top: -2.5%;
				}

			}

			@media (max-width:1199px) {

				#min-header {
					display: block;
				}

				#header {
					display: none;
				}

				.header-title {
					margin-left: auto;
				}

				.header-about {
					text-align: center;
				}
			}

			@media (max-width:991px) {
				picture {
					margin-top: -2.8%;
				}
			}

			@media (max-width:767px) {
				picture {
					margin-top: -3.8%;
				}
			}

			.minNav {
				display: table;
				margin-left: auto;
				margin-right: auto;
				border-top: 1px solid #c7ced1;
				padding-top: 15px;
			}

			#header {}

			blockquote {
				background-color: #f5f5f5;
				border-left: 4px solid red;
				color: #292929;
				padding: 16px;
				margin-top: 46px;
				margin-bottom: 34px;
			}

			.works-title {
				font-size: 17px;
				margin-bottom: 34px;
			}

			ul {
				color: #333;
			}

			.works-link {
				border-bottom: 1px dotted #ff1f1f;
				color: red;
			}
			#header-title{
				color: #414344;
				text-decoration: none;
			}
			#header-title:hover{
				color: #000000;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div id="zhuti" class="row">

				<!-- header -->
				<div id="header" class="col-xl-3 col-lg-12">
					<h1 class="header-title">
						<a id="header-title" href="个人博客.html">GanKun</a>
					</h1>
					<p class="header-about">Let life be beautiful like summer flowers and death like autumn leaves.</p>
					<ul id="nav" class="nav flex-column"
						style="display: table;border-top: 1px solid #c7ced1;padding-top: 24px;">
						<a class="nav-link" style="padding-left: 0;" href="极简导航.html" target="_blank">Home</a>
						<a class="nav-link" style="padding-left: 0;" href="作品库.html">Works</a>
						<a class="nav-link" style="padding-left: 0;" href="关于我.html">About</a>
					</ul>
				</div>

				<!-- min-header -->
				<div id="min-header" class="col-xl-3 col-lg-12">
					<h1 class="header-title">
						<a id="header-title" href="个人博客.html">GanKun</a>
					</h1>
					<p class="header-about">Let life be beautiful like summer flowers and death like autumn leaves.</p>
					<ul class="nav minNav">
						<div class="row">
							<div class="col-4">
								<a class="nav-link" style="padding-left: 0;" href="极简导航.html" target="_blank">Home</a>
							</div>
							<div class="col-4">
								<a class="nav-link" style="padding-left: 0;" href="作品库.html">Works</a>
							</div>
							<div class="col-4">
								<a class="nav-link" style="padding-left: 0;" href="关于我.html">About</a>
							</div>
						</div>
					</ul>
				</div>

				<!-- main -->
				<div class="col-xl-9  post-inner">
					<h1>作品库</h1>
					<blockquote>
						<p>创造一些简洁的东西。</p>
						<p style="margin-top: 24px;">永远在路上。</p>
					</blockquote>
					<ul>
						<li>
							<p class="works-title"><strong>GanKun Blog</strong></p>
							<p class="works-title">
								<em>我的个人主页。</em>
								<a href="个人博客.html" target="_blank" class="works-link">个人博客</a>
							</p>
						</li>

						<li>
							<p class="works-title"><strong>极简导航</strong></p>
							<p class="works-title">
								<em>简约，而不简单。</em>
								<a href="极简导航.html" target="_blank" class="works-link">极简导航</a>
							</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>
